import { createBrowserRouter, Navigate } from "react-router-dom";
import { useEffect } from "react";
import Layout from "../pages/Layout";
import Home from "../pages/Home/Home";
import Explain from "../pages/Explain/Explain";
import Sign_up from "../pages/Sign_up/Sign_up";
import Ranking from "../pages/Ranking/Ranking";
import Show from "../pages/Home/Show";
import Login from "../pages/Login/Login";
import Register from "../pages/Login/Register";
// import PrivateRoute from "./PrivateRoute"; // 导入 PrivateRoute 组件

// 动态设置页面标题的组件
function DynamicTitle({ title }: { title: string }) {
  useEffect(() => {
    document.title = title;
  }, [title]);

  return null;
}

// 路由配置
const router = createBrowserRouter([
  {
    path: "/app/layout",
    element: <Layout />,
    children: [
      {
        path: "/app/layout/home",
        element: (
          // <PrivateRoute>
            <>
              <DynamicTitle title="首页 - 名人堂" />
              <Home />
            </>
          // </PrivateRoute>
        ),
      },
      {
        path: "/app/layout/explain",
        element: (
          // <PrivateRoute>
            <>
              <DynamicTitle title="说明 - 名人堂" />
              <Explain />
            </>
          // </PrivateRoute>
        ),
      },
      {
        path: "/app/layout/sign_up",
        element: (
          // <PrivateRoute>
            <>
              <DynamicTitle title="报名 - 名人堂" />
              <Sign_up />
            </>
          // </PrivateRoute>
        ),
      },
      {
        path: "/app/layout/ranking",
        element: (
          // <PrivateRoute>
            <>
              <DynamicTitle title="排名 - 名人堂" />
              <Ranking />
            </>
          // </PrivateRoute>
        ),
      },
      {
        path: "/app/layout",
        element: <Navigate to="/app/layout/home" />,
      },
    ],
  },
  {
    path: "/*",
    element: <Navigate to="/app/layout/home" />,
  },
  {
    path: "/app/show/:id",
    element: (
      <>
        <DynamicTitle title="详情 - 名人堂" />
        <Show />
      </>
    ),
  },
  {
    path: "/app/supportContestant",
    element: (
      <>
        <DynamicTitle title="支持选手 - 名人堂" />
        {/* <SupportContestant /> */}
      </>
    ),
  },
  {
    path: "/app/login",
    element: (
      <>
        <DynamicTitle title="登录 - 名人堂" />
        <Login />
      </>
    ),
  },
  {
    path: "/app/register",
    element: (
      <>
        <DynamicTitle title="注册 - 名人堂" />
        <Register />
      </>
    ),
  },
]);

export default router;
